<template>
    <div class="main-box">
        <div class="massageBox">
            <div v-if="massageItem==true" style="height: 100%;width: 100%;">
                <div style="overflow-y: auto;margin-bottom: 1%;height: 74%" class="box">
                    <!--商家-->
                    <el-row style="margin-top: 2%" v-if="role==0" v-for="(item,k) in massageContent" :key="k">
                        <div v-if="item.sener!=me" style="float: left">
                            <div>
                                <div style="float: left">
<!--                                    <img style="margin-top: 2%" src="../../assets/image/icon.png">-->
                                    <el-divider direction="vertical"></el-divider>
                                </div>
                                <el-card shadow="always" >
                                    <div style="margin: 10px">
                                        <p>{{item.content}}</p>
                                    </div>
                                </el-card>
                            </div>
                        </div>
                        <div v-if="item.sener==me" style="float: right">
                            <div style="float: right">
                                <el-divider direction="vertical"></el-divider>
<!--                                <img style="margin-top: 2%" src="../../assets/image/storeIcon.png">-->
                            </div>
                            <el-card shadow="always">
                                <div style="margin: 10px">
                                    <p >{{item.content}}</p>
                                </div>
                            </el-card>
                        </div><div  style="float: right ;margin:40px 5px 0 0;font-size: 9px;color: #666666" v-if="item.sender==2&&item.chatStatus ===unread">未读</div>
                    </el-row>
                </div>
                <div style="float: right">

                </div>
                <el-button @click="submit()" class="submitBtn"
                           onmouseover="this.style.backgroundColor='transparent';this.style.color='#2d2d2d'"
                           onmouseout="this.style.backgroundColor='#18a2ff';this.style.color='#fff'"
                           round >发送</el-button>
                <el-input style="margin: 5px;right: 5px" maxlength="20" show-word-limit type="textarea" :rows="3" placeholder="请输入内容" v-model="textarea"></el-input>
            </div>
        </div>

        <h2 style="margin-left: 16%;">联系人</h2>
        <div style="overflow-y: auto" class="massageList">
            <el-divider content-position="center">
<!--                <img src="../../assets/image/massageList.png">-->
            </el-divider>
            <h3 style="margin-left: 25%;margin-top: 15%" v-if="massageList.length==0">还没有联系人呢 ｡◔‸◔｡</h3>
            <el-card v-for="(item,o) in massageList" :key="o" class="massageItem" shadow="hover"
                     onmouseover="this.style.backgroundColor='#ffccd9';this.style.color='#fff'"
                     onmouseout="this.style.backgroundColor='';this.style.color=''" @click.native="massage(item.account)">
                <div style="float: left">
                    <div style="float: left">
<!--                        <img style="margin-top: 5%" src="../../assets/image/massage.png">-->
                    </div>
                    <el-divider direction="vertical"></el-divider>
                    <div style="float: right">
                        <h3>{{item.name}}</h3>
                        <p>{{item.content}}</p>
                    </div>
                </div>
            </el-card>
        </div>
    </div>

</template>

<script>
    import Cookies from "js-cookie"
    export default {
        name: "messageBox",
        data () {
            return {
                info:'',
                role:0,
                me:'',
                massageList: [{name:'罗老师',content:'早上好'}],
                publicAccout:'',
                tempList:[],
                tempList2:[],
                massageItem: true,
                textarea: '',
                massageContent:[
                    {
                        content:'老师你好',
                        sener:'ly',
                    },
                    {
                        content:'我想请教你一个问题',
                        sener:'ly',
                    },
                    {
                        content:'同学你好',
                        sener:'sls',
                    }
                ]
            }
        },
        mounted() {
            this.info = Cookies.get('info')
            this.info = JSON.parse(this.info);
            this.role = this.info.role;
            this.me = this.info.account;
        },
        methods:{
            submit(){
                if (this.textarea!=''){
                    let data = {
                        sener:this.me,
                        content:this.textarea
                    }
                    this.textarea = ''
                    this.massageContent.push(data)
                }

            }
        }
    }
</script>

<style scoped>
    .massageList {
        height: 100%;
        width: 400px;
        margin-left: 10%;
        float: left;
        border: 2px solid #8c939d;
    }
    .massageBox {
        padding: 20px;
        height: 100%;
        width: 63%;
        margin-right: 2%;
        margin-top: 40px;
        float: right;
        border: 2px solid #8c939d;
    }
    .box {
        height: 80%;
    }
    .main-box {
        width: 100%;
        height: 87%;
        position: absolute;
        right: 0;
        left: 0;
        top: 65px;
        margin: auto;
    }
    .massageItem{
        height: 75px;
    }
    .submitBtn{
        float: right;
        border-radius: 20px;
        margin-bottom: 10px;
        border:solid 2px #15d0ff;
        background-color: #00e6f7;
        color: #ffffff;
    }
    .unread{
        background-color: #f78989;
        font-size: 20px;
    }

</style>
